import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {CommonPage} from '../../common-page';
// import {FormUtil} from '../../../../shared/utils/form-util';
import {UserComponent} from '../../user/user.component';
// import * as Stomp from 'stompjs';
// import * as SockJS from 'sockjs-client';
import {ExampleFormComponent} from '../form/example-form.component';
import * as echarts from 'echarts';

@Component({
  templateUrl: './other.component.html'
})
export class OtherComponent extends CommonPage implements OnInit {


  date;

  chartOption: {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1430, 1550, 1200, 1650.1450, 1680.1890],
      type: 'line',
      areaStyle: {}
    }]
  };

  component = UserComponent;
  fields = [{
    name: '姓名',
    code: 'name'
  }, {
    name: 'uuid',
    code: 'uuid'
  }, {
    name: 'id',
    code: 'id'
  }];
  disable = true;
  name3;
  startValue;
  fileId = [1];
  dateValue;
  uploadUrl = this.requestService.getRequestUrl('attachment/upload');
  dateYearValue;
  dateRangeValue;
  dateMonthValue;
  dateTimeValue;
  dateWeekValue;
  datas;

  selectValue1;
  selectValue2 = ['2', '3'];
  selectValue3 = '1001';
  selectValue4 = ['1001', '1002'];
  nametipe = '';
  options = [
    {name: '选择1号', value: '1'},
    {name: '选择3号', value: '3'},
    {name: '选择2号', value: '2'},
  ];
  radios = [
    {name: 'A', value: '1'},
    {name: 'B', value: '2'},
    {name: 'C', value: '3'}
  ];
  checks = [
    {name: 'A', value: '1'},
    {name: 'B', value: '2'},
    {name: 'C', value: '3'}
  ];
  /*treeData = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
        },
        {
          title: '0-0-1',
          key: '0-0-1',
        },
        {
          title: '0-0-2',
          key: '0-0-2',
          isLeaf: true
        }
      ]
    },
    {
      title: '0-1',
      key: '0-1',
    },
    {
      title: '0-2',
      key: '0-2',
      isLeaf: true
    }
  ];*/
  treeData = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            {title: '0-0-0-0', key: '0-0-0-0', isLeaf: true},
            {title: '0-0-0-1', key: '0-0-0-1', isLeaf: true},
            {title: '0-0-0-2', key: '0-0-0-2', isLeaf: true}
          ]
        },
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            {title: '0-0-1-0', key: '0-0-1-0', isLeaf: true},
            {title: '0-0-1-1', key: '0-0-1-1', isLeaf: true},
            {title: '0-0-1-2', key: '0-0-1-2', isLeaf: true}
          ]
        },
        {
          title: '0-0-2',
          key: '0-0-2',
          isLeaf: true
        }
      ]
    },
    {
      title: '0-1',
      key: '0-1',
      children: [
        {title: '0-1-0-0', key: '0-1-0-0', isLeaf: true},
        {title: '0-1-0-1', key: '0-1-0-1', isLeaf: true},
        {title: '0-1-0-2', key: '0-1-0-2', isLeaf: true}
      ]
    },
    {
      title: '0-2',
      key: '0-2',
      isLeaf: true
    }
  ];


  radioDisabled = false;
  radioValue = '1';
  checkDisabled = false;
  checkValue = ['3', '2'];
  treeValue = [161];
  singleTreeValue = ['0-0-0'];


  multi = [
    {
      name: 'Germany',
      series: [
        {
          name: '1990',
          value: 62000000
        },
        {
          name: '2010',
          value: 73000000
        },
        {
          name: '2011',
          value: 89400000
        }
      ]
    },

    {
      name: 'USA',
      series: [
        {
          name: '1990',
          value: 250000000
        },
        {
          name: '2010',
          value: 309000000
        },
        {
          name: '2011',
          value: 311000000
        }
      ]
    },

    {
      name: 'France',
      series: [
        {
          name: '1990',
          value: 58000000
        },
        {
          name: '2010',
          value: 50000020
        },
        {
          name: '2011',
          value: 58000000
        }
      ]
    },
    {
      name: 'UK',
      series: [
        {
          name: '1990',
          value: 57000000
        },
        {
          name: '2010',
          value: 62000000
        }
      ]
    }
  ];

  view: any[] = [700, 300];

  // options
  legend: true;
  showLabels: true;
  animations: true;
  xAxis: true;
  yAxis: true;
  showYAxisLabel: true;
  showXAxisLabel: true;
  xAxisLabel: 'Year';
  yAxisLabel: 'Population';
  timeline: true;

  colorScheme = {
    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
  };

  @ViewChild('formPanel') formPanel: ElementRef;

  onChange(result: Date): void {
    console.log('Selected Time: ', result);
  }

  onOk(result: Date | Date[] | null): void {
    console.log('onOk', result);
  }

  onCalendarChange(result: Array<Date | null>): void {
    console.log('onCalendarChange', result);
  }

  ngOnInit() {
    this.name3 = '34';
    this.dateYearValue = '2019';
    this.dateRangeValue = ['2020-02-02', '2020-02-10'];
    this.dateMonthValue = '2019-10';
    this.dateTimeValue = '2020-02-02 12:23:01';
    this.dateValue = '2020-02-02';
    this.dateWeekValue = '2020-07';
    this.datas = [
      {
        title: 'parent 1',
        key: '100',
        children: [
          {
            title: 'parent 1-0',
            key: '1001',
            children: [
              {title: 'leaf 1-0-0', key: '10010', isLeaf: true},
              {title: 'leaf 1-0-1', key: '10011', isLeaf: true}
            ]
          },
          {
            title: 'parent 1-1',
            key: '1002',
            children: [{title: 'leaf 1-1-0', key: '10020', isLeaf: true}]
          }
        ]
      }
    ];

    // @ts-ignore
    const myChart = echarts.init(document.getElementById('echarts'));
    myChart.setOption({
      title: {
        text: 'ECharts'
      },
      tooltip: {},
      xAxis: {
        data: ['a', 'b', 'c', 'd', 'e', 'f']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
  }


  export1({detail}) {
    console.log('export1 click', detail);
  }

  export2({detail}) {
    console.log('export2 click', detail);
  }

  testSocket() {
    this.requestService.post('/fintp/log/testsocket').subscribe();
  }

  notifyError() {
    this.messageService.notifyError('text', 'error');
  }

  notifyInfo() {
    this.messageService.notifyInfo('text', 'info');
  }

  notifySuccess() {
    this.messageService.notifySuccess('text');
  }


  info() {
    this.messageService.info('error');
  }

  success() {
    this.messageService.success('success');
  }

  error() {
    this.messageService.error('error');
  }

  inputValueChange(obj) {
    console.log(obj);
  }

  linkClick() {
    console.log('linkclick');
  }

  click() {
    this.windowService.openWindow({
      submitUrl: 'main/test',
      component: OtherComponent,
      title: '弹窗',
    });
  }

  clickDrawer() {
    this.windowService.openDrawer({
      submitUrl: 'main/test',
      component: ExampleFormComponent,
      title: '弹窗',
    });
  }

  getCheckValue() {
    this.messageService.notifyInfo(this.checkValue);
  }

  getRadioValue() {
    this.messageService.notifyInfo(this.radioValue);
  }

  available() {
    this.disable = !this.disable;
  }


  selectChange1({detail}) {
    console.log('select ', detail);
  }

  selectChange2({detail}) {
    console.log('select ', detail);
  }

  selectChange3({detail}) {
    console.log('select ', detail);
  }


  getSelectValue() {
    console.log('values3', this.selectValue3);
  }

  checkDisable() {
    this.checkDisabled = !this.checkDisabled;

  }

  radioDisable() {
    this.radioDisabled = !this.radioDisabled;
  }


  treeClick({detail}) {
    console.log('single tree click data', this.singleTreeValue);
    console.log('tree value', this.treeValue);
  }


  testClick() {
    this.selectValue1 = '';
    // this.selectValue2 = undefined;
    // this.selectValue3 = undefined;
    // this.selectValue4 = undefined;
  }

}




